<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html {
      height: 100%;
    }
    body {
      height: 100%;
    }
    .container {
      height: 100%;
      background-image: url("img/2.jpg");
      background-repeat: no-repeat;
      background-size: 100%;
      filter: opacity(50);
    }
    .login-wrapper {
      background-color: #fff;
      width: 358px;
      height: 588px;
      border-radius: 15px;
      padding: 0 50px;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .header {
      font-size: 38px;
      font-weight: bold;
      text-align: center;
      line-height: 200px;
      margin-top: -35px;

    }
    .input-item {
      display: block;
      width: 100%;
      margin-bottom: 20px;
      border: 0;
      padding: 10px;
      border-bottom: 1px solid rgb(128, 125, 125);
      font-size: 15px;
      outline: none;
    }
    .input-item placeholder {
      text-transform: uppercase;
    }
    .btn {
      text-align: center;
      padding: 10px;
      width: 50%;
      border-radius: 28px;
      margin-top: 40px;
      margin-left: 80px;
      background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
      color: #fff;
      cursor:pointer;
    }
    .msg {
      text-align: center;
      line-height: 88px;
    }
    a {
      text-decoration-line: none;
      color: #abc1ee;
    }
    .img{
      width: 50%;
      margin-left: -40px;
    }
    .btn:active{
      transform: scale(0.98);
      box-shadow: 3px 2px 22px 1px ;
    }

  </style>
</head>
<body>

<div class="container">
  <div class="login-wrapper">
    <img class="img" src="img/logo1.png">
    <div class="header">登录</div>
    <div class="form-wrapper">
      <div id="app">
      <input type="text" v-model="admin.username" placeholder="账号" class="input-item">
      <input type="password" v-model="admin.password" placeholder="密码" class="input-item">
      <div class="btn" @click="login()">登录</div>
      </div>
    </div>

</div>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        admin:{
          username:"",
          password:"",
          rem:false
        }
      }
    },
    methods:{
      login(){
        axios.post("/login/admin",v.admin).then(function (response) {
          if (response.data==1){
            location.href="/admin.html"
          } else if (response.data==2){
            v.$message.error("用户名不存在")
          }else {
            v.$message.error("密码错误！");
          }
        })
      }
    },/*
    created:function () {
      let arr = document.cookie.split(";");
      for (let cookie of arr) {
        let cookieArr = cookie.split("=")
        let name = cookieArr[0].trim()
        let value = cookieArr[1]
        if (name=="username"){
          this.user.username=value;
        }else if(name="password"){
          this.user.password = value;
        }
      }
    }*/
  })
</script>
</html>